
<template>
  <div>
    <BasePanel title="施工图审查信息" :one="true">
      <Table
          :columns="qualColumns"
          :row-key="record => record.censorId"
          :data-source="dataSource"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
          bordered
      >
        <template #indexSlot="{ index }">{{(pagination.current-1)*10+index+1}}</template>
        <template #detail="{ record }"><span class="blue pointer" @click="openDetail(record)">查看</span></template>
        <template #isPass="{ text }">
          <span v-if="text==='1'">通过</span>
          <span v-else>不通过</span>
        </template>
      </Table>


    </BasePanel>
    <Modal v-model:visible="visible" title="详细内容" :width="800" :footer="null" :centered="true">
      <Descriptions :column="2">
        <DescriptionsItem label="工程名称">{{ recordDetail.cenPrjName }}</DescriptionsItem>
        <DescriptionsItem label="施工图审查机构名称">{{ recordDetail?.censorCorpName }}</DescriptionsItem>
        <DescriptionsItem label="审查完成日期">{{ parseTime( recordDetail?.censorEdate ) }}</DescriptionsItem>
        <DescriptionsItem label="是否通过">{{ recordDetail?.censorIsPass==='1'?'通过':'不通过' }}</DescriptionsItem>
        <DescriptionsItem label="施工图审查合格书编号">{{ recordDetail?.censorNum }}</DescriptionsItem>
        <DescriptionsItem label="数据等级">{{ recordDetail?.dataLevel }}</DescriptionsItem>
        <DescriptionsItem label="是否联合审查">{{ recordDetail?.isLs }}</DescriptionsItem>
        <DescriptionsItem label="勘察单位名称">{{ recordDetail?.kcDwgcName }}</DescriptionsItem>
        <DescriptionsItem label="设计单位名称">{{ recordDetail.sjDwgcName }}</DescriptionsItem>
      </Descriptions>
    </Modal>
  </div>

</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, toRefs, ref } from 'vue';
import {Form, Input, Button, Select, Table, Row, Col , Modal , Descriptions} from "ant-design-vue";
import { BasePanel } from '/@/components/panelComponent/index';
import { getprjCensorApi } from '/@/api/pro';
import { parseTime } from '/@/utils';
interface pageConfig {
  current: number;
  total: number;
  pageSize: number;
}

const qualColumns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  { title: '审图合格书编号', dataIndex: 'censorNum' ,width: 250 },
  { title: '图审机构', dataIndex: 'censorCorpName' },
  { title: '一次审查是否通过', dataIndex: 'censorIsPass', slots: ({ customRender: 'isPass' }) ,width: 150 },
  { title: '审查完成时间', dataIndex: 'censorEdate' ,width: 125 ,customRender: ({ record })=> parseTime(record.censorEdate) },
  { title: '工程名称', dataIndex: 'cenPrjName'  ,width: 300},
  { title: '详情', dataIndex: 'recordId',width: 65 , slots: ({ customRender: 'detail' }) }

]

export default defineComponent({
  components: { BasePanel, Table ,Form, Row, Col,FormItem: Form.Item, Input, Button, Select, Option: Select.Option, Modal , Descriptions,DescriptionsItem:Descriptions.Item},
  setup() {
    const applyId = inject('applyId') as string;
    const dataSource = ref<unknown[]>([]);
    const loading = ref<boolean>(false);
    const visible = ref<boolean>(false);
    const recordDetail = ref<any>()
    const paginationRef = ref<pageConfig>({
      current: 1,
      total: 0,
      pageSize: 10 //每页中显示10条数据
    })

    const queryParam = reactive({
      applyId:applyId,
      current:1,
      size:10
    })

    const getTableList = () => {
      loading.value = true;
      getprjCensorApi(queryParam).then(({ data, success }) => {
        if(success) {
          let { records, size, total } = data;
          dataSource.value = records;
          paginationRef.value.total = total;
          paginationRef.value.pageSize = size;
          loading.value = false;
        }
      })
    }

    const init = () => {
      getTableList();
    }
    const openDetail = data =>{
      recordDetail.value = data
      visible.value = true;
    }
    const handleTableChange = (data: pageConfig) => {
      paginationRef.value = data;
      queryParam.current = data.current;
      queryParam.size = data.pageSize;
      getTableList();
    }
    onMounted(init)
    return {
      queryParam, qualColumns, pagination:paginationRef,dataSource,loading,
      ...toRefs(queryParam), getTableList ,handleTableChange,
      openDetail,visible,recordDetail,parseTime
    }
  },
})
</script>

<style lang="less" scoped>
.ant-tabs {
  margin-top: -60px;

  ::v-deep(.ant-tabs-nav-scroll) {
    display: flex;
    flex-direction: row-reverse;
  }
}

.filter{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 600px;
}
</style>
